iframe에 스크립트를로드 할 수 없습니다.

알렉세이

테스트 페이지 : https://jsfiddle.net/y25rk55w/

이 테스트 페이지에서 3 개가 <iframe>서로 삽입 된 것을 볼 수 있습니다 . 각각 <iframe><script>태그 에는 <head>태그가 있습니다.

문제는<script> 첫 번째 파일 <iframe>브라우저에 의해로드된다는 것입니다. 다른 두 개의 <script>태그는 dom에 있지만 브라우저는로드를 시도하지도 않습니다. 문제는 브라우저에만 국한된 것이 아니며 크롬, 파이어 폭스 등에서 줄일 수 있습니다. 제한 시간을 추가하거나 스크립트를 추가하기 전에 대기하여 문제를 해결할 수 없습니다. 모든 iframe에 프로그래밍 방식으로 생성 된 콘텐츠가있는 것이 중요해 보입니다. 이 iframe을 실제 src 링크가있는 iframe으로 바꾸면 문제가 사라집니다.

질문은 iframe 2와 3에 실제로 스크립트를로드하는 방법 입니다.

전체 테스트 코드 :

// It doesn't matter if the scripts exist or not
// Browser won't try to load them either way
var scripts = [
    '//testdomain.test/script1.js',
    '//testdomain.test/script2.js',
    '//testdomain.test/script3.js'
];

function createIFrame(win, onCreated) {
    var iframe = win.document.createElement('iframe');
    iframe.onload = function () {
        onCreated(iframe);
    };
    win.document.body.appendChild(iframe);
}

function loadScript(win, url) {
    var script = win.document.createElement('script');
    script.src = url;
    script.onload = function() {
        console.log("Script " + url + " is loaded.");
    };
    win.document.getElementsByTagName('head')[0].appendChild(script);
}

createIFrame(window, function(iframe1) {
    loadScript(iframe1.contentWindow, scripts[0]);
    createIFrame(iframe1.contentWindow, function (iframe2) {
        loadScript(iframe2.contentWindow, scripts[1]);
        createIFrame(iframe2.contentWindow, function (iframe3) {
            loadScript(iframe3.contentWindow, scripts[2]);
        });
    });
});
알렉세이

질문에서 내가 프로토콜을 생략하고 있음을 알 수 있습니다.

/* This is valid to omit the http:/https: protocol.
   In that case, browser should automatically append 
   protocol used by the parent page */
var scripts = [
    '//testdomain.test/script1.js',
    '//testdomain.test/script2.js',
    '//testdomain.test/script3.js'
];

문제는 프로그래밍 방식으로 생성 된 iframe에 프로토콜 about:(또는 javascript:생성 방법에 따라)이 있다는 것입니다. 여전히 첫 번째 스크립트가로드되는 이유 또는 다른 두 스크립트가 네트워크 탭에 전혀 표시되지 않는 이유를 설명 할 수 없지만 그다지 중요하지 않은 것 같습니다.

해결책 : 명시 적으로 사용 https://하거나 다음 코드와 같은 것을 사용하여 프로토콜을 프로그래밍 방식으로 추가합니다.

function appendSchema(win, url) {
    if (url.startsWith('//')) {
        var protocol = 'https:';
        try {
            var wPrev = undefined;
            var wCur = win;
            while (wPrev != wCur) {
                console.log(wCur.location.protocol);
                if (wCur.location.protocol.startsWith("http")) {
                    protocol = wCur.location.protocol;
                    break;
                }
                wPrev = wCur;
                wCur = wCur.parent;
            }
        } catch (e) {
            /* We cannot get protocol of a cross-site iframe.
             * So in case we are inside cross-site iframe, and
             * there are no http/https iframes before it,
             * we will just use https: */
        }
        return protocol + url;
    }
    return url;
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

스크립트를 iframe에 격리 할 수 없습니다.

분류에서Dev

시스템 서비스 스크립트에서 로컬로 빌드 된 ntpd를 시작할 수 없습니다.

분류에서Dev

내 자바 스크립트를로드 할 수 없습니다.

분류에서Dev

SharePoint에서 Jquery UI 스크립트를로드 할 수 없습니까?

분류에서Dev

다른 스크립트 파일 내에서 스크립트 파일을로드 할 수 없습니다.

분류에서Dev

다른 스크립트 파일 내에서 스크립트 파일을로드 할 수 없습니다.

분류에서Dev

로드 된 페이지에서 자바 스크립트 코드를 실행할 수 없습니다.

분류에서Dev

스크립트에서 Unity WebGL 프로젝트를 빌드 할 수 없습니다.

분류에서Dev

Microsoft Azure-다음 API에 대한 스크립트를로드 할 수 없습니다 ... 오류 500

분류에서Dev

" 'index.android.bundle'애셋에서 스크립트를로드 할 수 없습니다. 확인하세요 ..."

분류에서Dev

자바 스크립트에서 이미지를 올바르게로드 할 수 없습니다.

분류에서Dev

ajax가로드 한 데이터에 자바 스크립트를 제공 할 수 없습니다.

분류에서Dev

Rails : 내 페이지에 두 개의 Jquery 스크립트를로드 할 수 없습니다.

분류에서Dev

Rails : 내 페이지에 두 개의 Jquery 스크립트를로드 할 수 없습니다.

분류에서Dev

PHP 스크립트를 통해 Ubuntu 서버에 파일을 업로드 할 수 없습니다.

분류에서Dev

vim에서 fzf로 스크립트를 실행할 수 없습니다.

분류에서Dev

npm 스크립트에서 Autoprefixer를 제대로 구성 할 수 없습니다.

분류에서Dev

IE에서 로컬 스크립트를 실행할 수 없습니다.

분류에서Dev

jquery로 타사 스크립트에서 div를 제거 할 수 없습니다.

분류에서Dev

/ 중에 Bash 스크립트를 실행할 수 없습니다.

분류에서Dev

bspwmrc에서 스크립트를 시작할 수 없습니다.

분류에서Dev

HTML CODE의 iframe에서 웹 사이트를로드 할 수 없습니다.

분류에서Dev

iframe은 iOS에서로드 할 수 없습니다.

분류에서Dev

bash 스크립트에서 변수를 업데이트 할 수 없습니다.

분류에서Dev

텍스트 파일에서 스크립트를 실행할 수 없습니다.

분류에서Dev

div가로드 될 때 jquery 스크립트를 실행할 수 없습니다. DOM로드 전에 jquery 코드를 실행하십시오.

분류에서Dev

Firefox에서 초기화 스크립트를로드 할 수 있습니까?

분류에서Dev

PHP 스크립트로 레코드를 삭제할 수 없습니다

분류에서Dev

Perl 코드를 CGI 스크립트로 실행할 수 없습니다.

Related 관련 기사

  1. 1

    스크립트를 iframe에 격리 할 수 없습니다.

  2. 2

    시스템 서비스 스크립트에서 로컬로 빌드 된 ntpd를 시작할 수 없습니다.

  3. 3

    내 자바 스크립트를로드 할 수 없습니다.

  4. 4

    SharePoint에서 Jquery UI 스크립트를로드 할 수 없습니까?

  5. 5

    다른 스크립트 파일 내에서 스크립트 파일을로드 할 수 없습니다.

  6. 6

    다른 스크립트 파일 내에서 스크립트 파일을로드 할 수 없습니다.

  7. 7

    로드 된 페이지에서 자바 스크립트 코드를 실행할 수 없습니다.

  8. 8

    스크립트에서 Unity WebGL 프로젝트를 빌드 할 수 없습니다.

  9. 9

    Microsoft Azure-다음 API에 대한 스크립트를로드 할 수 없습니다 ... 오류 500

  10. 10

    " 'index.android.bundle'애셋에서 스크립트를로드 할 수 없습니다. 확인하세요 ..."

  11. 11

    자바 스크립트에서 이미지를 올바르게로드 할 수 없습니다.

  12. 12

    ajax가로드 한 데이터에 자바 스크립트를 제공 할 수 없습니다.

  13. 13

    Rails : 내 페이지에 두 개의 Jquery 스크립트를로드 할 수 없습니다.

  14. 14

    Rails : 내 페이지에 두 개의 Jquery 스크립트를로드 할 수 없습니다.

  15. 15

    PHP 스크립트를 통해 Ubuntu 서버에 파일을 업로드 할 수 없습니다.

  16. 16

    vim에서 fzf로 스크립트를 실행할 수 없습니다.

  17. 17

    npm 스크립트에서 Autoprefixer를 제대로 구성 할 수 없습니다.

  18. 18

    IE에서 로컬 스크립트를 실행할 수 없습니다.

  19. 19

    jquery로 타사 스크립트에서 div를 제거 할 수 없습니다.

  20. 20

    / 중에 Bash 스크립트를 실행할 수 없습니다.

  21. 21

    bspwmrc에서 스크립트를 시작할 수 없습니다.

  22. 22

    HTML CODE의 iframe에서 웹 사이트를로드 할 수 없습니다.

  23. 23

    iframe은 iOS에서로드 할 수 없습니다.

  24. 24

    bash 스크립트에서 변수를 업데이트 할 수 없습니다.

  25. 25

    텍스트 파일에서 스크립트를 실행할 수 없습니다.

  26. 26

    div가로드 될 때 jquery 스크립트를 실행할 수 없습니다. DOM로드 전에 jquery 코드를 실행하십시오.

  27. 27

    Firefox에서 초기화 스크립트를로드 할 수 있습니까?

  28. 28

    PHP 스크립트로 레코드를 삭제할 수 없습니다

  29. 29

    Perl 코드를 CGI 스크립트로 실행할 수 없습니다.

뜨겁다태그

보관